import React, { Component } from 'react';
import { Link, routerRedux } from 'dva/router';
import { connect } from 'dva';

import { List, InputItem,  Toast, Flex,Icon,WingBlank} from 'antd-mobile';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import {makeName} from './makeName.less';
import { createForm } from 'rc-form';

const {Item} =List;

class MakeName extends Component {
    constructor(props) {
        super(props);
        this.state={

        }
    }

    componentDidMount(){
        console.log(this.props.match.params.data)
    }
    onClick = ()=>{
        const { name } = this.props.form.getFieldsValue();
        if (!name) {
            Toast.info('请输入昵称', 1.5);
            return;
        }else{
            const regex = new RegExp("^[\u4e00-\u9fa50-9a-zA-Z_\-]{4,20}$");
            const res = regex.test(name);
            //console.log(res)
            if (!res) {
              Toast.info('输入格式不合法', 1)
              return;
            }else {
            this.props.dispatch({type:"accountManagement/editMemberEFF",obj:{truename:name}}).then((r)=>{
                if(r.code==200){
                    Toast.success(r.msg, 1.5, ()=>{
                        this.props.dispatch(routerRedux.goBack());
                    });
                } else {
                    Toast.fail(r.msg, 1.5);
                }
            })
            }
        }




    }

    render() {
        const { getFieldProps, getFieldError } = this.props.form;
        return (
            <Flex style={{
                height:"100%"
            }} direction="column"
                className={makeName}
            >
                <NavTopBar title="修改昵称" rightContent={<span onClick={this.onClick} style={{color:"#999"}}>确定</span>} dispatch={this.props.dispatch}/>
                    <form style={{width:"100%"}}>
                        <List
                            renderFooter={() => getFieldError('name') && getFieldError('name').join(',')}
                        >
                            <InputItem
                                {...getFieldProps('name')}
                                clear
                                placeholder={this.props.match.params.data || '请输入昵称'}
                            />
                            <Item style={{background:"rgb(245, 245, 249)"}}>
                                <div style={{fontSize:".22rem",color:"#999"}}>4-20个字符,可由中英文、数字、"-"、"—"组成</div>
                            </Item>

                        </List>
                    </form>
            </Flex>
        );
    }
}

export default connect(({ accountManagement }) => ({ accountManagement }))(createForm()(MakeName));
